<link rel="stylesheet" href="__PUBLIC__/css/treeview/jquery.treeview.css" type="text/css">
<script type="text/javascript" src="__PUBLIC__/js/mxcrm.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/treeview/jquery.treeview.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/treeview/jquery.treeview.edit.js"></script>
<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
.filetree span.file {
	background: url(__PUBLIC__/css/treeview/images/folder.gif) 2px 3px no-repeat;
}

#mutidialog_data tr{cursor: pointer;}
</style>
<div style="position:relative;background-color:#fff;float:left;width:820px;margin-top:-6px;border-bottom:1px solid #eee;">
	<div class="clearfix form-inline" style="line-height:30px;margin-top:5px;margin-left:15px;">
		<input name="dialog_add_product" id="dialog_add_product" type="hidden"/>
		<ul class="nav pull-left">
			<li class="pull-left">产品筛选&nbsp;:&nbsp;</li>
			<li class="pull-left">
				<select id="field" class="form-control input-sm" style="width:auto" onchange="changeCondition()" name="field">
					<!-- <option class="text" value="name">--请选择筛选条件--</option> -->
					<volist name="field_list" id="v">
						<if condition="$v['field'] neq 'category_id'">
							<option class="{$v['form_type']}" value="{$v[field]}" rel="product">{$v[name]}</option>
						</if>
					</volist>
					<option class="role" value="creator_role_id">{:L('FOUNDER')}</option>
					<option class="date" value="create_time">{:L('CREATION_TIME')}</option>
					<option class="date" value="update_time">{:L('MODIFICATION_TIME')}</option>
				</select>&nbsp;&nbsp;
			</li>
			<li id="conditionContent" class="pull-left ">
				<select id="condition" class="form-control input-sm" style="width:auto" name="condition" onchange="changeSearch()">	
					<option value="contains">{:L('INCLUDE')}</option>
					<option value="is">{:L('YES')}</option>
					<option value="start_with">{:L('BEGINNING_CHARACTER')}</option>
					<option value="end_with">{:L('TERMINATION_CHARACTER')}</option>
					<option value="is_empty">{:L('MANDATORY')}</option>
				</select>&nbsp;&nbsp;
			</li>
			<li id="searchContent" class="pull-left">
				<input id="search" type="text" class="input-medium form-control input-sm search-query" name="search" onkeydown="if(event.keyCode==13)d_changeCondition(0)"/>&nbsp;&nbsp;
			</li>
			<li class="pull-left">
				<input type="hidden" name="m" value="product"/>
				<input type="hidden" id="cid" value="0"/>
				<if condition="$Think.get.by neq null"><input type="hidden" name="by" value="{$Think.get.by}"/></if>
				<button class="btn btn-primary btn-sm" onclick="d_changeCondition(0,1)">{:L('SEARCH')}</button>
			</li>
		</ul>
	</div>
	<div class="result clearfix" style="line-height:30px;margin:8px 15px;" id="res">
		<input type="hidden" name="customer_id" value="{$_GET['customer_id']}" />
		<div style="float:left;" rel="1">已选产品 :</div>
		<volist name="product_list" id="vo">
		<div class="se_product" rel="{$vo['product_id']}">
			{$vo['name']}
			<input class="bus_product" name="product_id[]" value="{$vo['product_id']}" type="hidden">
			<i class="fa fa-remove remove" style="cursor: pointer;"></i>
		</div>
		</volist>
	</div>
</div>
<div class="row" style="margin-left:0px;margin-right:0px;">
	<div class="span2 pull-left" style="margin-left: 7px;padding-top:15px">
		{$treecode}
	</div>
	<div class="span6 pull-right" style="margin: 0px;">
		<table class="table table-hover table_thead_fixed">
			<thead id="header" class="dialog-thead">
				<tr>
					<th style="width: 46px"></th>
					<th>{:L('PRODUCT_NAME')}</th>
					<th>{:L('PRODUCT_CATEGORY')}</th>
				</tr>
			</thead>
			<tfoot id="footer1">
				<tr>
					<if condition="C('ismobile') neq 1"><td colspan="3"><else /><td colspan="3"></if>
						<div class="row" style="margin-left:0px;">
						</div>
					</td>
				</tr>
			</tfoot>
			<tbody id="loads" class="hide">
				<tr><td class="tdleft" <if condition="C('ismobile') neq 1">colspan="3"<else />colspan="3"</if> style=" height:300px;text-align:center"><img src="__PUBLIC__/img/load.gif"></td></tr>
			</tbody>
			<tbody id="mutidialog_data" class="dialog-body">
				<empty name="list">
					<tr>
						<td colspan="3">{:L('THERE_IS_NO_DATA')}</td>
					</tr>
				<else/>
					<volist name="list" id="vo">
					<tr>
						<td>
							<input value="{$vo.product_id}" name="product_id" class="product_id" type="checkbox"/>
							<input type="hidden" value="{$vo.suggested_price}"/>
							<input type="hidden" value="{$vo.standard}"/>
							<input type="hidden" value="{$vo.cost_price}"/>
							<input type="hidden" value="{$vo.category_name}"/>  
							<!-- <label for=""></label> -->
							<!-- <input type="checkbox" name="product_id" class="product_id" value="{$vo.product_id}" /> -->
						</td>
						<td>{$vo.name}</td>
						<td>{$vo.category_name}</td> 
					</tr>
					</volist>
				</empty>
			</tbody>
		</table>
		<div id="footer" style="position: relative;">
			<div style="display:inline;clear: both; display: inline; position: relative; left: -14px; top: -8px;"><span id="count">{$count_num}</span> {:L('RECORDS')} <span id="p1">1</span>/<span id="total_page">{$total}</span> {:L('PAGE')}</div>
			<ul id="changepage1" class="pagination" style="margin-bottom:0px;">
				<li><span class='current'>{:L('FIRST_PAGE')}</span></li><li><span>« {:L('THE_PREVIOUS_PAGE')}</span></li>
				<if condition="1 lt $total">
				<li><a class="page" href="javascript:void(0)" rel="2">{:L('THE_NEXT_PAGE')} »</a></li>
				<else />
				<li><span>{:L('THE_NEXT_PAGE')} »</span></li>
				</if>
			</ul>
		</div>
	</div>	
</div>
<script type="text/javascript">
	$("#browser").treeview();
	
	$(".file").hover(
		function(){
			$(this).css('color','#3399CC');
		},
		function(){
			$(this).css('color','');
		}
	);
	
	$(".ta").click(
		function(){
			var cid = $(this).attr('rel');
			$('#cid').val(cid);
			$(".ta").each(function(){$(this).css('background-color','');$(this).css('font-weight','500');});
			$(this).css('background-color','#BEEBFF');
			$(this).css('font-weight','700');
			d_changeCondition(0,0);
		}
	);
	
	$("#check_all").click(function(){
		$("input[class='check_list']").prop('checked', $(this).prop("checked"));
	});
	$('.page').click(function(){
		var a = $(this).attr('rel');
		d_changeCondition(a,0);
	});
	function d_changeCondition(p, a){

		$('#mutidialog_data').addClass('hide');
		$('#load').removeClass('hide');
		if(a){
			var c = 0;
			$(".ta").each(function(){$(this).css('background','');$(this).css('font-weight','500');});
		}else{
			var c = $('#cid').val();
		}
		var field = $('#field').val();
		var condition = $('#condition').val();
		var search = encodeURI($("#search").val());
		$.ajax({
			type:'get',
			url:'index.php?m=product&a=changecontent&field='+field+'&search='+search+'&condition='+condition+'&p='+p+'&cid='+c,
			async:false,

			success:function(data){
				var temp = '';
				if(data.data.list != null){
					$.each(data.data.list, function(k, v){
						var checked = checkRes(v.product_id) ? 'checked=checked' : '';
						temp += '<tr><td><input type="checkbox" class="product_id" name="product_id" '+checked+' class="check_list" value="'+v.product_id+'"/><input type="hidden" value="'+v.suggested_price+'"/><input type="hidden" value="'+v.standard+'"/><input type="hidden" value="'+v.cost_price+'"/><input type="hidden" value="'+v.category_name+'"></td><td>'+v.name+'</td><td>'+v.category_name+'</td></tr>';
					});
					var changepage = "";
					if(data.data.p == 1){
						changepage = "<li><span class='current'>{:L('FIRST_PAGE')}</span></li><li><span>« {:L('THE_PREVIOUS_PAGE')} </span></li>";
						if(data.data.p < data.data.total){
							changepage += "<li><a class='page' href='javascript:void(0)' rel='"+(data.data.p+1)+"'>{:L('THE_NEXT_PAGE')} »</a></li>";
						}else{
							changepage += "<li><span>{:L('THE_NEXT_PAGE')} »</span></li>";
						}
					}else if(data.data.p == data.data.total){
						changepage = "<li><a class='page' href='javascript:void(0)' rel='1'>{:L('FIRST_PAGE')}</a></li><li><a class='page' href='javascript:void(0)' rel='"+(data.data.p-1)+"'>« {:L('THE_PREVIOUS_PAGE')}</a></li><li><span>{:L('THE_NEXT_PAGE')} »</span></li>";
					}else{
						changepage = "<li><a class='page' href='javascript:void(0)' rel='1'>{:L('FIRST_PAGE')}</a></li><li><a class='page' href='javascript:void(0)' rel='"+(data.data.p-1)+"'>« {:L('THE_PREVIOUS_PAGE')}</a></li><li><a class='page' href='javascript:void(0)' rel='"+(data.data.p+1)+"'>{:L('THE_NEXT_PAGE')} »</a></li>";
					}
					$('#footer1').removeClass('hide');
					$('#footer').removeClass('hide');
					$('#p1').html(data.data.p);
					$('#changepage1').html(changepage);
					$('#count').html(data.data.count);
					$('#total_page').html(data.data.total);
					$('#mutidialog_data').html(temp);
					$('.page').click(function(){
						var a = $(this).attr('rel');
						d_changeCondition(a,0);
					});
				}else{
					$('#mutidialog_data').html('<tr><td colspan="4">{:L('DIDNOT_FIND_THE_RESULTS_YOU_WANT')}</tr>');
					$('#footer').addClass('hide');
					$('#footer1').addClass('hide');
				}
				$('#loads').addClass('hide');
				$('#mutidialog_data').removeClass('hide');
				selaction();
			},
			dataType:'json'
		});		
	}
	
	//检查已选择产品 如果存在则删除
	function checkDelRes(pid){
		var res_id =  new Array();
		$(".se_product").each(function(){
			//res_id.push($(this).attr('rel'));
			if(pid == $(this).attr('rel')) $(this).remove();
		});
	}
	//检查产品是否存在 返回false or true；
	function checkRes(pid){
		var res = false;
		$(".se_product").each(function(){
			if(pid == $(this).attr('rel')) res = true;
		});
		return res;
		
	}
	
	selaction();
	bindaction();
	
	//得到事件
	function getEvent(){
		 if(window.event)    {return window.event;}
		 func=getEvent.caller;
		 while(func!=null){
			 var arg0=func.arguments[0];
			 if(arg0){
				 if((arg0.constructor==Event || arg0.constructor ==MouseEvent
					|| arg0.constructor==KeyboardEvent)
					||(typeof(arg0)=="object" && arg0.preventDefault
					&& arg0.stopPropagation)){
					 return arg0;
				 }
			 }
			 func=func.caller;
		 }
		 return null;
	}
	
	function selaction(){
		//选择产品时 如果勾选则添加 否则删除
		
		$('.product_id').click(function(){
			var checked = $(this).prop('checked');
			var pid = $(this).val();
			if(checked){
				var pname = $(this).parent().next().text();
				var price = $(this).next().val();
				var standard = $(this).next().next().val();
				var cost_price = $(this).next().next().next().val();
				var category_name = $(this).next().next().next().next().val();
				$('#res').append('<div class="se_product" rel="'+$(this).val()+'">'+pname+'<input type="hidden" name="suggested_price" value="'+price+'"/><input type="hidden" name="standard" value="'+standard+'"/><input type="hidden" name="cost_price" value="'+cost_price+'"/><input type="hidden" name="category_name" value="'+category_name+'"><i class="fa fa-remove remove"></i></div>');
				bindaction();
			}else{
				checkDelRes(pid);
			}
			//防止事件冒泡
			 var e=getEvent();
			if(window.event){
				//e.returnValue=false;//阻止自身行为
				e.cancelBubble=true;//阻止冒泡
			 }else if(e.preventDefault){
				//e.preventDefault();//阻止自身行为
				e.stopPropagation();//阻止冒泡
			 }
		});
		
		
		$("#mutidialog_data tr").click(function(){
			var a = $(this).find('td:first-child .product_id').prop('checked');
			
			var target = $(this).find('td:first-child .product_id');
			var pid = $(target).val();

			if(a == false){
				$(this).find('td:first-child .product_id').prop('checked', true);
				var pname = $(target).parent().next().text();
				var price = $(target).next().val();
				var standard = $(target).next().next().val();
				var cost_price = $(target).next().next().next().val();
				var category_name = $(target).next().next().next().next().val();
				$('#res').append('<div class="se_product" rel="'+$(target).val()+'">'+pname+'<input type="hidden" name="suggested_price" value="'+price+'"/><input type="hidden" name="standard" value="'+standard+'"/><input type="hidden" name="cost_price" value="'+cost_price+'"/><input type="hidden" name="category_name" value="'+category_name+'"><i class="fa fa-remove remove"></i></div>');
				bindaction();
				
			}else{
				checkDelRes(pid);
				$(this).find('td:first-child .product_id').prop('checked', false);
			}
		});
	}
	
	function bindaction(){
		//删除按钮
		$('.remove').click(function(){
			$(this).parent().remove();
		});
		
		//删除按钮颜色变化
		$('.remove').hover(
			function(){
				$(this).css('color','#3399CC');
			},
			function(){
				$(this).css('color','');
			}
		);
	}
</script>
